<template>
	<view class="container">
		<view class="color-box">
			<view class="purple"></view>
			<view class="blue"></view>
		</view>

		<view class="login-box">
			<view class="login-inner-box">
				<view style="display: flex;align-items: center;justify-content: space-between;">
					<view class="login-text">
						登录
					</view>
				</view>
				<view class="inner-box">
					<view class="label">账号</view>
					<view class="input-box">
						<view class="">
							<input v-model="userInfo.username" type="text" placeholder="请输入账号">
						</view>
					</view>
				</view>

				<view class="inner-box">
					<view class="label">密码</view>
					<view class="input-box">
						<view>
							<input v-model="userInfo.password" type="password" placeholder="请输入密码">
						</view>
					</view>
				</view>

				<view class="inner-bottom">
					<view @click="toSaveAccount" class="inner-bottom-left">
						<view v-if="!isRemember" class="remember"></view>

						<image v-else class="remember-img" src="@/static/images/remember.svg" mode=""></image>
						<view>记住账号</view>
					</view>
					<view>
						<button class="login-btn" @click="toLogin">登录</button>
					</view>
				</view>


			</view>
	
		</view>
	</view>





</template>

<script setup lang="ts">
	import { reactive, ref } from "vue";
	import { login } from '@/utils/api.js'

	const isRemember = ref(false)  //记住为true,显示对勾图标，表示本地缓存里面有账号信息，记住为false,表示本地缓存里面没有账号信息

	let userInfo = reactive({
		username: '',
		password: '',
	}) //用户登录信息


	//一进入页面 首先看看本地缓存里面有没有账号信息
	userInfo.username = uni.getStorageSync("act")
	userInfo.password = uni.getStorageSync("psd")

	if (uni.getStorageSync("act") && uni.getStorageSync("psd")) {
		isRemember.value = true
	}


	let codeUrl = ref('')  //验证码图片路径	

	const toLogin = async () => {
		if(!userInfo.username || !userInfo.password){
			uni.showToast({
				title:"账号密码信息未填写",
				icon:"none"
			})
			return 
		}
		
		let res = await login(userInfo)
		if (res.code == 200) {
			// 登录成功,把token存入本地缓存中
			uni.setStorageSync('token', res.token)
			uni.switchTab({
				url: '../index/index'
			})
		}
		if (res.code == 500) {
			wx.showToast({
				title: res.msg,
				icon: "error"
			})
		}
	}


	//点击记住账号及小图标，缓存账号信息
	function toSaveAccount() {
		if(isRemember.value){
			//记住勾选了点击他是去清除缓存中的账号信息，并且取消勾选
			isRemember.value = false
			uni.removeStorageSync("act")
			uni.removeStorageSync("psd")
		}else{
			//记住未勾选点击他是去存缓存信息，在这之前要判断账号信息是否有了
			if(!userInfo.username || !userInfo.password){
				uni.showToast({
					title:"账号密码信息未填写",
					icon:"none"
				})
				return 
			}	
			uni.setStorageSync("act", userInfo.username)
			uni.setStorageSync("psd", userInfo.password)
			isRemember.value = true
		}
		
	}
</script>

<style>
	page {
		background-color: #F5F5F5;
	}

	.purple {
		width: 60%;
		height: 25vh;
		background: radial-gradient(circle at center, #98C5F3, #9FC6EB);
		-webkit-backdrop-filter: blur(60rpx);
		filter: blur(60rpx);
		position: absolute;
		top: 0vh;
		left: 0vh;
	}

	.blue {
		width: 70%;
		height: 35vh;
		background: linear-gradient(to right, #9BDDF5, #98DFF7);
		-webkit-backdrop-filter: blur(60rpx);
		filter: blur(60rpx);
		position: absolute;
		top: 0vh;
		right: -2vh;
		border-radius: 30%;
	}

	.color-box {
		display: flex;
		justify-content: center;
		margin-top: -2vh;
		position: relative;
	}

	.login-box {
		position: absolute;
		z-index: 100;
		margin-top: 23vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
	}

	.login-text {
		font-size: 6vw;
		font-weight: 500;
		margin: 2vh 0;
	}

	.logo {
		margin-top: 2vh;
		width: 30vw;
		height: 6vh;
	}

	.logo image {
		width: 100%;
		height: 100%;
	}

	.inner-box {
		margin-bottom: 2vh;
	}

	.label {
		color: #6B7074;
	}

	.login-inner-box {
		background-color: rgba(255, 255, 255, .3);
		padding: 0 10vw;
		box-shadow: 2rpx 2rpx 12rpx 0rpx rgba(95, 95, 95, 0.1);
		border-radius: 20rpx;
		margin-bottom: 10vh;
	}

	.input-box {
		width: 68vw;
		border-bottom: 2rpx solid #0070FF;
		font-size: 5vw;
	}

	.input-box input {
		margin: 1.8vh 0;
	}

	.remember {
		border: 9rpx solid #C8C8C8;
		width: 3vw;
		height: 3vw;
		border-radius: 50%;
		margin-right: 3vw;
	}

	.inner-bottom {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 6vh 0;
		width: 100%;
	}

	.inner-bottom-left {
		display: flex;
		align-items: center;
		font-size: 4vw;
		color: #a8a8a8;
	}

	.login-btn {
		background-color: #32BAED;
		border-radius: 25rpx;
		width: 30vw;
		text-align: center;
		color: #FFFFFF;
		display: block;
		line-height: 6vh;
		font-size: 4vw;
	}

	.remember-img {
		width: 5vw;
		height: 5vw;
		margin-right: 3vw;
	}
</style>